<template>
	<view class="orderview">
		<view class="topBar">
			<hx-navbar :background-color="navbarConfig.background" :fixed="true" :back="true" transparent="show" :color="navbarConfig.color"
			 title="抢单记录"></hx-navbar>
		</view>

		<view class="tabs-box">
			<u-tabs-swiper :activeColor="colorConfig.base" ref="tabs" :list="navList" :current="current" @change="tabsChange"
			 :is-scroll="false" swiperWidth="750"></u-tabs-swiper>
		</view>
		<!-- 抢单记录 -->
		<swiper class="scroll-box" :current="swiperCurrent" duration="300" @change="changeTab">
			<swiper-item v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="full" scroll-y @scrolltolower="loadData">
					<!-- 空白页 -->
					<empty v-if="tabItem.loaded == true && tabItem.orderList.length == 0" src="empty"></empty>
					<!-- 订单列表 -->
					<view class="order-info" v-for="(item, index) in tabItem.orderList" :key="index" @tap="navToDetail(item)">
						<view class="order-info-state">
							{{statusMap[item.status]}}
						</view>
						<view class="order-info-goto">
							<view class="order-info-goto-1"><text class="zhuang">起</text></view>
							<text class="order-info-goto-2">{{item.startPointName}}</text>
						</view>
						<view class="order-info-goto">
							<view class="order-info-goto-1"><text class="xie">终</text></view>
							<text class="order-info-goto-2">{{item.endPointName}}</text>
						</view>
						<u-line color="#101010" margin="20rpx -30rpx" length="690upx"></u-line>
						<view class="order-info-detail">
							<view class="order-info-detail-1">订单生成时间：</view>
							<view class="order-info-detail-2">{{$util.sliceTime(item.createTime)}}</view>
						</view>
						<view class="order-info-detail" v-if="item.status == 5">
							<view class="order-info-detail-1">订单完成时间：</view>
							<view class="order-info-detail-2">{{$util.sliceTime(item.finishTime)}}</view>
						</view>
						<view class="order-info-detail">
							<view class="order-info-detail-1">保证金：</view>
							<view class="order-info-detail-2 red">¥{{item.cashDeposit}}</view>
						</view>
						<view class="card-info-time">{{item.carType}} | {{item.cargoType }}</view>
					</view>
					<uni-load-more :status="tabItem.loading"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import uniLoadMore from '@/components/uni-load-more.vue'
	import empty from "@/components/empty.vue"
	export default {
		data() {
			return {
				statusMap: {
					1: '已发布',
					2: '已提交',
					3: '待审核',
					4: '已接货',
					5: '已完成',
					6: '已撤销',
					7: '已抢单'
				},
				current: 0,
				swiperCurrent: 0,
				navList: [{
					state: "null",
					name: '全部',
					loading: 'more',
					pageNum: 1,
					pageSize: 10,
					orderList: []
				}, {
					state: 3,
					name: '审核中',
					loading: 'more',
					pageNum: 1,
					pageSize: 10,
					orderList: []
				}, {
					state: 7,
					name: '已抢单',
					loading: 'more',
					pageNum: 1,
					pageSize: 10,
					orderList: []
				}, {
					state: 5,
					name: '已完成',
					loading: 'more',
					pageNum: 1,
					pageSize: 10,
					orderList: []
				}],
			}
		},
		onLoad() {
			this.loadData()
		},
		components: {
			uniLoadMore,
			empty
		},
		methods: {
			// tabs通知swiper切换
			tabsChange(index) {
				this.swiperCurrent = index
			},
			//swiper切换
			changeTab(e) {
				this.current = e.target.current
				this.swiperCurrent = e.target.current
				this.loadData('tabChange')
			},
			//获取订单列表
			loadData(source) {
				//这里是将订单挂载到tab列表下
				let index = this.swiperCurrent
				let navItem = this.navList[index]
				if (source == 'tabChange' && navItem.loaded == true) {
					//tab切换只有第一次需要加载数据
					return
				}
				if (navItem.loading != 'more') {
					//防止重复加载
					return
				}
				navItem.loading = 'loading'
				this.$api.request('POST', '/api/order/selectOrderCompleteCar', {
					status: navItem.state,
					pageNum: navItem.pageNum,
					pageSize: navItem.pageSize
				}, false).then(res => {
					navItem.loading = navItem.pageNum < Math.ceil(res.data.account / navItem.pageSize) ? 'more' : 'nomore'
					navItem.pageNum = navItem.pageNum + 1
					res.data.selectOrderCompleteCar.forEach(item => {
						navItem.orderList.push(item)
					})
					//loaded新字段用于表示数据加载完毕，如果为空可以显示空白页
					this.$set(navItem, 'loaded', true)
				})
			},
			navToDetail(item) {
				let url = '/pages/order/detail?id='
				if (item.status == 4 || item.status == 7) {
					url = '/pages/order/trace?id='
				}
				uni.navigateTo({
					url: url + item.id,
				})
			}
		}
	};
</script>

<style lang="less">
	page,
	.orderview {
		height: 100%;
	}

	.orderview {
		display: flex;
		flex-direction: column;
	}

	.scroll-box {
		flex: 1;
		height: 300upx;
	}

	.btm-box {
		margin-top: 30upx;
		display: flex;
		justify-content: flex-end;

		.custom-style {
			margin: 0;
			width: 200upx;
			height: 68upx;
			line-height: 68upx;
		}
	}
</style>
